<template>
  <div class="liveRoomBox">
    <div class="listBox" v-for="item in liveList" :key="item.id">
      <div class="imgBox flex-h">
        <img :data-src='item.live_imgae_url' class="left" :src="item.thumbnail" alt="">
        <div class="right flex1">
          <span class="title">{{item.title}}</span>
          <span :class="['status', item.state=== -1?'status3':item.state_text===0?'status2':'status1']">{{item.state_text}}</span>
          <span class="time">开始时间：{{item.start_time}}</span>
        </div>
      </div>
      <div class="desc"><b>培训导师：{{item.teacher}}</b><i>{{item.teacher_introduction}}</i></div>
      <img class="clickImg" @click="previewImage" :data-type="item.state" :data-video="item.live_video_url" :data-src='item.live_imgae_url' src="../../../static/images/double_circle.png" alt="">
    </div>
  </div>
</template>

<script>
// import config from '../../../package.json'
export default {
  components: {
  },
  data () {
    return {
      liveList: []
    }
  },
  mounted () {
    let that = this
    wx.request({
      url: 'https://app.sx985.com/api/live/classes/timetable',
      method: 'POST',
      header: {
        'content-type': 'application/json' // 默认值
      },
      success (res) {
        console.log('res.data', res.data)
        that.liveList = res.data.data
        that.liveList.forEach(item => {
          item.start_time = item.start_time.substring(5, 16)
        })
        console.log('this.liveList: ', that)
      }
    })
  },

  methods: {
    previewImage: function (e) {
      console.log('e: ', e)
      var current = e.target.dataset.src
      let type = e.target.dataset.type
      let video = e.target.dataset.video
      if (type === 1) {
        wx.previewImage({current: current, urls: [current]})
      } else if (type === 0) {
        wx.showModal({
          // title: '提示',
          content: '培训尚未开始，开播时期待您来哦！',
          showCancel: false,
          success (res) {
            if (res.confirm) {
              console.log('用户点击确定')
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })
      } else {
        if (video) {
          console.log('video111: ', encodeURIComponent(video))
          wx.navigateTo({url: '../outerWebView/main?type=video&data=' + encodeURIComponent(video)})
        } else {
          wx.showModal({
          // title: '提示',
            content: '回放正在整理中，敬请期待！',
            showCancel: false,
            success (res) {
              if (res.confirm) {
                console.log('用户点击确定')
              } else if (res.cancel) {
                console.log('用户点击取消')
              }
            }
          })
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.flex-h{
  display: flex;
  align-items: center;
}
.flex1{
  flex: 1
}
 .liveRoomBox{
   padding: 30rpx;
   box-sizing: border-box;
   .listBox{
     width: 100%;
     height: auto;
     padding: 30rpx 0;
     border-bottom: 1rpx solid rgba(229,229,229,1);
     position: relative;
     z-index: 1;
     .clickImg{
       position: absolute;
       width: 100%;
       height: 100%;
       left: 0;
       top: 0;
       z-index: 2;
       opacity: 0;
       -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      opacity: 0;
     }
     .imgBox{
       height: 180rpx;
       .left{
         width: 320rpx;
         height: 180rpx;
       }
       .right{
         padding-left: 20rpx;
         box-sizing: border-box;
         .title{
            font-size:30rpx;
            font-weight:500;
            color:rgba(0,0,0,1);
            display: block;
            line-height: 40rpx;
            height: 80rpx;
         }
         .status{
            padding: 0 15rpx;
            height: 40rpx;
            line-height: 40rpx;
            border-radius: 20rpx;
            
            border-radius:20rpx;
            font-size:24rpx;
            font-weight:500;
            color:rgba(255,255,255,1);
            margin-top: 10rpx;
         }
         .status1{     
          background:rgba(242,63,63,1);
         }
        .status2{
          background: #FFAD0D;
         }
        .status3{
          background:#D2D2D2;
         }
         .time{
            display: block;
            font-size:24rpx;
            font-family:Source Han Sans CN;
            font-weight:500;
            color:rgba(177,177,177,1);
            margin-top: 15rpx;
         }
       }
     }
     .desc{
       height: auto;
       margin-top: 30rpx;
       i,b{
         display: initial;
       }
       b{
        font-size:26rpx;
        font-weight:500;
        color:rgba(5,5,5,1);
       }
       i{
        font-size:26rpx;
        font-weight:500;
        color:rgba(99,99,99,1);
        margin-left: 20rpx;
        line-height: 30rpx;
       }
     }
   }

 }
</style>
